<template>
    <el-container style="min-height: 100vh">

        <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
        </el-aside>

        <el-container>
            <el-header style="border-bottom: 1px solid #ccc">
                <Header :collapseBtnClass="collapseBtnClass" @asideCollapse="collapse" :user="user"/>
            </el-header>

            <el-main>
                <router-view @refreshUser="getUser"/>
            </el-main>

        </el-container>
    </el-container>
</template>

<script>

    import Aside from "@/components/Aside"
    import Header from "@/components/Header"

    export default {
        name: 'Home',
        data() {
            return {
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
                user: {}
            }
        },
        created() {
            //从后台获取最新的数据
            this.getUser()
        },
        components: {
            Aside,
            Header
        },
        methods: {
            collapse() {  // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse;
                if (this.isCollapse) {  // 收缩
                    this.sideWidth = 64;
                    this.collapseBtnClass = 'el-icon-s-unfold';
                    this.logoTextShow = false
                } else {   // 展开
                    this.sideWidth = 200;
                    this.collapseBtnClass = 'el-icon-s-fold';
                    this.logoTextShow = true
                }
            },
            getUser() {
                /*let username = JSON.parse(localStorage.getItem("user")).username ? JSON.parse(localStorage.getItem("user")).username : {}
                //从后台获取User数据
                if(username){
                    this.request.get("/user/username/" + username).then(res => {
                        // 重新赋值后台的数据
                       this.user = res.data

                    })
                 }*/

                this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : []
            }
        }
    }
</script>

<style>

</style>
